<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper class="swiper" circular :autoplay='autoplay' :interval='interval' :duration="duration">
			<swiper-item v-for="item in carousels" :key='item.cid'>
				<view class="swiper-item">
					<image :src="base + item.pic" mode="widthFix" @click="jump(item.href)"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 宫格图 -->
		<uni-grid class='unigrid' :column="4" :showBorder="false" :square="true">
			<uni-grid-item class="unigriditem" mode="widthFix" v-for="item in menuItems" :key="item.iid">
				<view class="unigriditemi" @click="jump(item.href)">
					<image :src="base + item.pic" mode="" mode="widthFix"></image>
					<text>{{item.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 商业服务 -->
		<uni-card class="card" title="| 商业服务" :isFull='true'>
			<view class="service">
				<view class="service-item">
					<view class="txt">
						<text>房屋租售</text>
						<view class="text-li">
							<navigator>租房</navigator>
							<navigator>短租</navigator>
						</view>
					</view>
					<image class="img" src="../../static/img/chuzu.png" mode="scaleToFill"></image>
				</view>
				<view class="service-item">
					<view class="txt">
						<text>便民服务</text>
						<view class="text-li">
							<navigator>便利店</navigator>
							<navigator>超市</navigator>
						</view>
					</view>
					<image class="img" src="../../static/img/bianmin.png" mode="scaleToFill"></image>
				</view>
			</view>
		</uni-card>

		<!--f4:社区活动-->
		<uni-card class="card" title="| 社区活动" :isFull="true" padding="0">
			<uni-list :border="false">
				<uni-list-item class="activity-item" v-for="item in activities" :key="item.aid">
					<template v-slot:body>
						<view class="activity-body">
							<text class="title">{{item.title}}</text>
							<text class="content">{{item.content}}</text>
							<text class="time">{{item.startTime | processingTime}}</text>
						</view>
					</template>
					<template v-slot:footer>
						<image class="pic" :src="base + item.pic" mode="widthFix"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
	import {
		indexData,
		base
	} from "../../service/index.js"
	import {formatDate} from "../../common/utils.js"
	export default {
		data() {
			return {
				carousels: [], //轮播图图片
				menuItems: [], //当前用户定制的功能菜单列表
				activities: [], //社区活动数据列表
				interval: 3000, //两张页面的过度时间
				duration: 500, //单页面滚动的时间
				autoplay: true, //是否自动播放
				base: base,
				
			}
		},
		// 该生命周期函数只执行一次
		async onLoad() {
			uni.showToast({
				title: '欢迎回来',
				icon: 'none',
				duration: 1000,
				position: 'bottom',
			})
			//发送axios请求
			let data = await indexData()
			console.log(data);
			//把首页的数据存起来
			this.carousels = data.carousels
			this.menuItems = data.menuItems
			this.activities = data.activities
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				})
			}
		},
		filters:{
			processingTime(value){
				 // 将时间戳转换成date对象
				      let date = new Date(value);
				      //将date格式化转成对应得字符串   yyyy代表的是年，MM是月  dd是日    
				      return formatDate(date, 'yyyy年MM月dd日 hh:mm')
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.swiper {
			width: 750rpx;
			height: 300rpx;

			.swiper-item {
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;

				image {
					width: 750rpx;
				}
			}
		}


		.unigrid {
			background-color: #fff;
			margin: $uni-spacing-col-base 0;
			width: 750rpx;

			.unigriditem {
				width: 25%;

				.unigriditemi {
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 100%;

					image {
						width: 60rpx;
					}

					text {
						font-size: $uni-font-size-base;
					}
				}

			}
		}

		.card {
			width: 100%;

			.service {
				width: 100%;

				.service-item {
					//弹性子元素尺寸增长权重：1
					flex: 1;
					//子元素主轴方向上居中
					justify-content: space-between;
					//子元素在交叉轴方向上居中
					align-items: center;
					padding: 0 10rpx;

					.img {
						width: 160rpx;
						height: 100rpx;
					}

					.txt {
						font-size: $uni-font-size-sm;
						flex-direction: column;

						.text-li {
							navigator {
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}

		.activity-item {
			align-items: center;

			.activity-body {
				padding: 0;
				flex-direction: column;
				width: 420rpx;

				.title {
					font-size: $uni-font-size-base;
					font-weight: bold;
					@include ellipsis-1;
				}

				.content {
					display: block;
					width: 420rpx;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
					@include ellipsis-1;
				}

				.time {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
			}

			.pic {
				width: 240rpx;
			}
		}

	}
</style>
